/** @define Progressbar; use strict */

:root {
  --Progressbar-rhythm           : 1.5rem;
  --Progressbar-highlight        : #4e9fdd;
  --Progressbar-success          : #70a98b;
  --Progressbar-unsure           : #e0c350;
  --Progressbar-neutral          : color(#416988 tint(50%));
  --Progressbar-warning          : #ffa800;
  --Progressbar-danger           : #e0575b;
  --Progressbar-item-z-index     : 100;
  --Progressbar-approved-z-index : 200;
}

.Progressbar {
  position: relative;
  width: 100%;
  height: calc(var(--Progressbar-rhythm) * .5);
  margin: 0;
  background-color: var(--Progressbar-neutral);
}

.Progressbar--sm {
  height: calc(var(--Progressbar-rhythm) * .25);
}

.Progressbar--lg {
  height: var(--Progressbar-rhythm);
}

.Progressbar-item {
  position: absolute;
  left: 0;
  z-index: var(--Progressbar-item-z-index);
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  list-style: none;
}

/* Need to stick to this naming convention (against suitcss) so that it does
not conflict with the other frontend code
 */

.Progressbar-approved {
  background-color: var(--Progressbar-highlight);
  z-index: var(--Progressbar-approved-z-index);
}

.Progressbar-translated {
  background-color: var(--Progressbar-success);
}

.Progressbar-needsWork {
  background-color: var(--Progressbar-unsure);
}

.Progressbar-rejected {
  background-color: var(--Progressbar-warning)
}

.Progressbar-untranslated {
  background-color: var(--Progressbar-neutral);
}
